<template>

  <div>
    <!-- login -->
    <div class="top center">
      <div class="logo center">
      </div>
    </div>
    <form class="form center">
      <div class="login">
        <div class="login_center">
          <div class="login_top">
            <div class="left fl">会员登录</div>
            <div class="right fr">您还不是我们的会员？<a href="./register.html" target="_self">立即注册</a></div>
            <div class="clear"></div>
            <div class="xian center"></div>
          </div>
          <div class="login_main center">
            <div class="username">用户名:&nbsp;<input class="shurukuang" type="text" name="username"
                                                   v-model="username" placeholder="请输入你的用户名"/></div>
            <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" type="password"
                                                                          v-model="password" name="password"
                                                                          placeholder="请输入你的密码"/></div>
            <div class="username">
              <div class="left fl">验证码:&nbsp;<input class="yanzhengma" type="text" name="username"
                                                    placeholder="请输入验证码"/></div>
              <div class="right fl"><img :src="img1"></div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="login_submit" @click="login()">
            <input class="submit" type="button" name="submit" value="立即登录">
          </div>

        </div>
      </div>
    </form>
    <footer>
      <div class="copyright">简体 | 繁体 | English | 常见问题</div>
      <div class="copyright">小米公司版权所有-京ICP备10046444-<img :src="img2" alt="">京公网安备11010802020134号-京ICP证110507号</div>

    </footer>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: "login",
    data: function () {
      return {
        username: '',
        password: '',
        logo_url: require('../../assets/image/mistore_logo.png'),
        img1: require('../../assets/image/yanzhengma.jpg'),
        img2: require('../../assets/image/ghs.png'),
      }
    },
    watch: {
      username: function (val) {
      }
    },
    methods: {
      login: function () {
        // 查询参数
        this.$axios.get('/login', {
          params: {
            name: this.username,
            password: this.password
          }
        }).then(response => {
          if (response.data.status_num === 0) {
            // 先清除cookie
            // 设置cookie 保持登录状态
            this.$cookie.set('username',this.username)
            this.$cookie.set('sessionId', response.data.code)
            this.$router.push({
              path: '/index',
            })
            window.location.reload()
          } else {
            alert('密码错误!!')
          }
        })
      }
    }

  }

</script>

<style scoped>
  @import '../../assets/css/login.css';
  @import '../../assets/css/style.css';
</style>
